<template>
  <div class="Index">
    <div class="sidebar">
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索"
          :prefix-icon="Search"
        />
      </div>
      <div class="filter-box">
        <div class="filter-title">发布者类型</div>
        <!-- <el-radio-button label="all">全部</el-radio-button> -->
        <el-link-group v-model="selectedType" class="filter-options">
          <!-- <el-radio-button label="theory">理论学习</el-radio-button>
          <el-radio-button label="activity">青年活动</el-radio-button>
          <el-radio-button label="volunteer">志愿服务</el-radio-button>
          <el-radio-button label="advanced">走进高新</el-radio-button>
          <el-radio-button label="nightschool">青年夜校</el-radio-button>
          <el-radio-button label="society">社会实践</el-radio-button> -->
          <el-link type="theory">理论学习</el-link>
          <el-link type="activity">青年活动</el-link>
          <el-link type="volunteer">志愿服务</el-link>
          <el-link type="advanced">走进高新</el-link>
          <el-link type="nightschool">青年夜校</el-link>
          <el-link type="society">社会实践</el-link>
        </el-link-group>
      </div>
    </div>
    <div class="content">
      <div class="post-grid">
        <div v-for="post in posts" :key="post.id" class="post-card">
          <div class="post-media" v-if="post.type === 'video'">
            <div class="video-placeholder">
              <el-icon>
                <VideoPlay />
              </el-icon>
            </div>
          </div>
          <div class="post-media" v-else>
            <div class="image-placeholder">
                <img v-if="post.image" :src="post.image" alt="Post Image" />
            </div>
          </div>
          <div class="post-info">
            <h3 class="post-title">{{ post.title }}</h3>
            <p class="post-content">{{ post.content }}</p>
            <div class="post-meta">
              <span>发布于: {{ post.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search, VideoPlay, Picture } from '@element-plus/icons-vue'

const searchQuery = ref('')
const selectedType = ref('all')

const posts = ref([
  {
    id: 1,
    type: 'video',
    title: '小八',
    content: '我是乌萨奇',
    date: '2024-11-03 16:11'
  },
  {
    id: 2,
    type: 'image',
    title: '奶龙',
    content: '我是奶龙',
    date: '2024-11-03 16:11',
    image: new URL('@/assets/2.jpg', import.meta.url).href // ES Modules 方式    
  },
  {
    id: 3,
    type: 'image',
    title: '暴暴龙',
    content: '桀桀桀桀桀',
    date: '2024-11-03 16:11',
    image: new URL('@/assets/4.jpg', import.meta.url).href // ES Modules 方式
  },
  {
    id: 4,
    type: 'video',
    title: '乌萨奇',
    content: '我是小八',
    date: '2024-11-03 16:11'
  }
])
</script>

<style scoped lang="scss">
.Index {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 268px;
  height: 846px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  margin-top: 10px;
}

.search-box {
  margin-bottom: 7px;
}

.filter-box {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  flex:1;
  margin-top: 10px;
  border: solid 1.5px pink;
  
  .filter-title {
    font-weight: 404;
    margin-bottom: 15px;
    margin-left: 10px;
    color: #506f8f; /* 使用深蓝灰色提升高级感 */
  }
  
  .filter-options {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 每行 2 列 */
    gap: 15px;
    
    //   .el-radio-button {
    //   text-align: center;
    //   padding: 10px 0; /* 调整内边距 */
    //   background-color: #f9f9f9; /* 默认背景色 */
    //   border: 1px solid #e0e0e0; /* 默认边框颜色 */
    //   border-radius: 8px; /* 圆角 */
    //   transition: all 0.3s ease; /* 添加平滑过渡效果 */
    //   cursor: pointer;
    //   box-shadow: 2px 2px 2px 1px rgba(0, 0, 255, .2);

    //   /* 鼠标悬停时效果 */
    //   &:hover {
    //     background-color: #f0f8ff; /* 改变背景色 */
    //     border-color: #b0c4de; /* 改变边框颜色 */
    //   }

    //   /* 激活状态（选中时效果） */
    //   &.is-checked {
    //     // background-color: #dbeafe; /* 选中背景色 */
    //     // border-color: #3b82f6; /* 选中边框颜色 */
    //     color: #1e40af; /* 选中文本颜色 */
    //     font-weight: bold; /* 选中文本加粗 */
    //   }
    // }

    .el-link{
      text-align: center;
      padding: 10px 0; /* 调整内边距 */
      background-color: #f9f9f9; /* 默认背景色 */
      border: 1px solid #e0e0e0; /* 默认边框颜色 */
      border-radius: 8px; /* 圆角 */
      transition: all 0.3s ease; /* 添加平滑过渡效果 */
      cursor: pointer;
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 255, .2);

      /* 鼠标悬停时效果 */
      &:hover {
        background-color: #f0f8ff; /* 改变背景色 */
        border-color: #b0c4de; /* 改变边框颜色 */
      }

      /* 激活状态（选中时效果） */
      &.is-checked {
        background-color: #dbeafe; /* 选中背景色 */
        border-color: #3b82f6; /* 选中边框颜色 */
        color: #1e40af; /* 选中文本颜色 */
        font-weight: bold; /* 选中文本加粗 */
      }
    }
  }
}

.content {
  flex: 1;
  min-width: 0;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  padding:10px;
}

.post-card {
  height: 424px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: solid 2px peachpuff;
  border-radius: 10px;
  
  .post-media {
    height: 300px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    // position: relative;
    
    .el-icon {
      font-size: 48px;
      color: #999;
    }
  }
  

  .post-media img{
    width: 100%; /* 图片宽度占满容器 */
    height: 100%; /* 图片高度占满容器 */
    object-fit: cover; /* 按比例裁剪图片，填满容器 */
    object-position: center; /* 图片居中显示 */
    // position: absolute;
  }

  .post-media .image-placeholder{
    height: 300px;
    width: 100%;
  }
  
  .post-info {
    padding: 16px;
    
    .post-title {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 468;
    }
    
    .post-content {
      margin: 0 0 12px;
      color: #666;
      font-size: 14px;
    }
    
    .post-meta {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>